front end About vue+element ui to upload files html Determine the type of uploaded file But I encountered a problem at this time. I don't know why the .xls file type is blank in the console, which makes the .xls file fail to pass the judgment. So another method is us... front end [ KDT] 핀테크 서비스프론트앤드 개발자 - TIL #4 문자 (String) 숫자 (Number) 불린 (Boolean) Null Undefined 심볼 (Symbol) 배열 (Array) 객체 (Object) 함수 (Function) 문자 숫자 Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환합니다. 소숫점 숫자 날리기 Not-A-Number - 숫자 데이터 / 숫자로 표시 불가! 불린(Boolead... KDT 핀테크 서비스 프론트앤드front endJavaScriptTILJavaScript CSS 실무 테크닉 스타일링이 까다로운 input요소를 화면에서 숨기고 label 요소 연결하여 커스텀 select 박스 대신 button, ul, li 를 이용하여 커스텀 ✔ input 커스텀 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보 전달 텍스트를 숨겨두는 방법 ✔ 카카오가 사용하는 방법 (PC) 이미지내 의미있는 텍스트의 대체텍스트 제공 (Mobile) 이미지내 의미있는 텍스트의 대체텍... 멋쟁이사자처럼front endCSSCSS [ KDT] 핀테크 서비스프론트앤드 개발자 - TIL #3 A라는 상태가 B라는 상태로 변환되는 모습을 보여 준다. property, duration, timing-function, delay 순으로 작성한다. 전환효과를 부여할 때 가상클래스에 부여하지 않고 요소 자체에 부여한다! transition 속성보다 조금 더 세밀한 변환(애니메이션) 작업을 진행할 수 있다. 다수의 스타일을 세트로 변환시킬 수 있다. animation: animation-n... KDT 핀테크 서비스 프론트앤드front endTILCSSCSS 흐르는 텍스트 구현하기 화면상에서 텍스트가 왼쪽으로 무한히 흐르는 것을 구현해보자. 호버(hover) 했을 때는 텍스트 색이 진해지면서 흐르던 것이 멈춘다. 일단 html 구조는 아래와 같다. 화면상에서 무한으로 흐르는 텍스트를 구현하기 위해서 해당 텍스트를 감싼 div.flow-wrap 태그를 여러개 만들었다. 물론 반복되는 텍스트의 길이에 따라 갯수가 더 추가되거나 줄어들 수 있다. div.flow-contai... CSSflow-textfront endanimationCSS [JS] 스크롤 감지 이벤트 현재 스크롤 되고 있는 부분에 맞춰서 헤더 제목이 포커싱되는 효과를 넣고 싶었다. 처음에는pageYOffset의 값(이하 posY)이 특정 숫자 범위안에 있을때, 각각의 제목이 포커싱 되도록 했다. 위 사진으로 예를 들자면, posY가 0<= posY < 100의 값이면 헤더의 home이 포커싱 되고 100<= posY < 200이면 about이 포커싱되는 방식이었다. 이 방식은 화면 크기가... JavaScriptfront endJavaScript hook_LayoutEffets 란? 깃허브에 저장 된 hook-flow라는 프로젝트를 저장해 보았다. useLayoutEffect useEffect uselayoutEffect와 useEffect와 동일한 형태를 가진다. uselayoutEffect와 useEffect 차이점 useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페이트가 끝난 후 이펙트 함수를 호출한다. 따라서 상태값이 effect에 의존할 경우 약간 ... Reacthookfront endReact [Git/Github] (특정 파일 확장자를 무시하거나 이름에 패턴이 존재하는 경우, 또는 특정 디렉토리 아래의 모든 파일) 현재 폴더의 폴더 및 파일 확인 remove 파일 및 디렉토리 삭제 파일 및 디렉토리 검색 $ls : 현재 디렉토리에 있는 폴더 및 파일 출력 $ls -a : .으로 시작하는 파일, 폴더를 포함하여 전체 파일 및 폴더 출력 $cp <원본 파일명> <옮기고 싶은 디렉토리명> : 해당 디렉토리로... KDT핀테크 서비스 프론트앤드githubfront endgitTILKDT핀테크 서비스 프론트앤드 Angular 앵귤러(Angular)는 클라이언트 (웹) 애플리케이션을 개발을 위해 만들어진 프레임워크이다. 즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 프레임워크로 볼 수 있다. 앵귤러(Angular)는 두가지 서로 다른 버전이 존재한다 바로 Angular.js와 Angular 이다. Angular는 Google에서 만든 SPA(singule page application)... Viewfront endAngularAngular HTML에 대하여 <head>태그는 웹페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용합니다. <head>태그 안에는 <title>, <meta> 등이 있습니다. <div>태그는 아무런 의미가 없는, 컨텐츠들을 어떠한 목적에 따라서 묶어야할 때 사용하는 태그입니다. <span>태그는 <div>태그와 같이 아무런 의미가 없는 컨텐츠들을 어떠한 목적에 따라서 묶어야할 때 사용하는 태그입니다. <spa... front endhtmlfront end [Front-End] HTML & CSS CSS : 꾸미기 : 웹 브라우저, 페이지의 권고안 -> W3C validator로 웹 표준에 부합하는지 검사 가능 2) 웹 접근성 연구소 : 개발자들의 웹 콘텐츠 접근성 지침 ex) 한국어 패치, beautify, live server(얜 이미 하고 있었음) >> 비트맵 vs 벡터 1) 비트맵 : 픽셀이 모여진 이미지로, 화면에 렌더링 되는 형식으로 출력 ex) jpg, png, gif 2... CSSfront endhtmlCSS localStorage vs. sesseionStorage localStorage 라는 개념에 마주하게 되었다. sessionStorage 라는 개념을 비교하면서 정리해보고자 한다. web storage 개념을 알아야 한다. ✔️ web storage 웹 스토리지 (web storage) 는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 기본적으로 키 (key) 와 값 (value) 으로 이루어진 데이터를 저장할 수 있다. ⚠️ Da... JavaScriptfront endJavaScript [프론트엔드] HTML5 #1 ✔️ visual studio code 사용 ! + tab키를 누르면 기본 html 형식 나옴 html:5 + tab키를 눌러도 기본 형식 나타남 ✔️ hn tag 제목을 표시할 때 사용하는 태그 ✔️ br tag 줄을 바꿀 수 있음 ✔️ p tag 하나의 문단을 표시할 때 사용 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐 ✔️ pre tag 입력한 글자를 그대로 보고싶을 때... front endhtmlfront end TIL 21 | DOM(Document Object Model) DOM이란 Document Object Model의 약자로서, 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object)모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. 즉, DOM은 HTML인 웹 페이지와 스크립팅 언어인 JavaScript를 연결하는 역할을 수행한다. 그럼 구체적으로 어떻게 JavaScript는 HTML에 접근할 ... JavaScriptDOMTILfront endhtmlDOM
About vue+element ui to upload files html Determine the type of uploaded file But I encountered a problem at this time. I don't know why the .xls file type is blank in the console, which makes the .xls file fail to pass the judgment. So another method is us... front end [ KDT] 핀테크 서비스프론트앤드 개발자 - TIL #4 문자 (String) 숫자 (Number) 불린 (Boolean) Null Undefined 심볼 (Symbol) 배열 (Array) 객체 (Object) 함수 (Function) 문자 숫자 Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환합니다. 소숫점 숫자 날리기 Not-A-Number - 숫자 데이터 / 숫자로 표시 불가! 불린(Boolead... KDT 핀테크 서비스 프론트앤드front endJavaScriptTILJavaScript CSS 실무 테크닉 스타일링이 까다로운 input요소를 화면에서 숨기고 label 요소 연결하여 커스텀 select 박스 대신 button, ul, li 를 이용하여 커스텀 ✔ input 커스텀 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보 전달 텍스트를 숨겨두는 방법 ✔ 카카오가 사용하는 방법 (PC) 이미지내 의미있는 텍스트의 대체텍스트 제공 (Mobile) 이미지내 의미있는 텍스트의 대체텍... 멋쟁이사자처럼front endCSSCSS [ KDT] 핀테크 서비스프론트앤드 개발자 - TIL #3 A라는 상태가 B라는 상태로 변환되는 모습을 보여 준다. property, duration, timing-function, delay 순으로 작성한다. 전환효과를 부여할 때 가상클래스에 부여하지 않고 요소 자체에 부여한다! transition 속성보다 조금 더 세밀한 변환(애니메이션) 작업을 진행할 수 있다. 다수의 스타일을 세트로 변환시킬 수 있다. animation: animation-n... KDT 핀테크 서비스 프론트앤드front endTILCSSCSS 흐르는 텍스트 구현하기 화면상에서 텍스트가 왼쪽으로 무한히 흐르는 것을 구현해보자. 호버(hover) 했을 때는 텍스트 색이 진해지면서 흐르던 것이 멈춘다. 일단 html 구조는 아래와 같다. 화면상에서 무한으로 흐르는 텍스트를 구현하기 위해서 해당 텍스트를 감싼 div.flow-wrap 태그를 여러개 만들었다. 물론 반복되는 텍스트의 길이에 따라 갯수가 더 추가되거나 줄어들 수 있다. div.flow-contai... CSSflow-textfront endanimationCSS [JS] 스크롤 감지 이벤트 현재 스크롤 되고 있는 부분에 맞춰서 헤더 제목이 포커싱되는 효과를 넣고 싶었다. 처음에는pageYOffset의 값(이하 posY)이 특정 숫자 범위안에 있을때, 각각의 제목이 포커싱 되도록 했다. 위 사진으로 예를 들자면, posY가 0<= posY < 100의 값이면 헤더의 home이 포커싱 되고 100<= posY < 200이면 about이 포커싱되는 방식이었다. 이 방식은 화면 크기가... JavaScriptfront endJavaScript hook_LayoutEffets 란? 깃허브에 저장 된 hook-flow라는 프로젝트를 저장해 보았다. useLayoutEffect useEffect uselayoutEffect와 useEffect와 동일한 형태를 가진다. uselayoutEffect와 useEffect 차이점 useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페이트가 끝난 후 이펙트 함수를 호출한다. 따라서 상태값이 effect에 의존할 경우 약간 ... Reacthookfront endReact [Git/Github] (특정 파일 확장자를 무시하거나 이름에 패턴이 존재하는 경우, 또는 특정 디렉토리 아래의 모든 파일) 현재 폴더의 폴더 및 파일 확인 remove 파일 및 디렉토리 삭제 파일 및 디렉토리 검색 $ls : 현재 디렉토리에 있는 폴더 및 파일 출력 $ls -a : .으로 시작하는 파일, 폴더를 포함하여 전체 파일 및 폴더 출력 $cp <원본 파일명> <옮기고 싶은 디렉토리명> : 해당 디렉토리로... KDT핀테크 서비스 프론트앤드githubfront endgitTILKDT핀테크 서비스 프론트앤드 Angular 앵귤러(Angular)는 클라이언트 (웹) 애플리케이션을 개발을 위해 만들어진 프레임워크이다. 즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 프레임워크로 볼 수 있다. 앵귤러(Angular)는 두가지 서로 다른 버전이 존재한다 바로 Angular.js와 Angular 이다. Angular는 Google에서 만든 SPA(singule page application)... Viewfront endAngularAngular HTML에 대하여 <head>태그는 웹페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용합니다. <head>태그 안에는 <title>, <meta> 등이 있습니다. <div>태그는 아무런 의미가 없는, 컨텐츠들을 어떠한 목적에 따라서 묶어야할 때 사용하는 태그입니다. <span>태그는 <div>태그와 같이 아무런 의미가 없는 컨텐츠들을 어떠한 목적에 따라서 묶어야할 때 사용하는 태그입니다. <spa... front endhtmlfront end [Front-End] HTML & CSS CSS : 꾸미기 : 웹 브라우저, 페이지의 권고안 -> W3C validator로 웹 표준에 부합하는지 검사 가능 2) 웹 접근성 연구소 : 개발자들의 웹 콘텐츠 접근성 지침 ex) 한국어 패치, beautify, live server(얜 이미 하고 있었음) >> 비트맵 vs 벡터 1) 비트맵 : 픽셀이 모여진 이미지로, 화면에 렌더링 되는 형식으로 출력 ex) jpg, png, gif 2... CSSfront endhtmlCSS localStorage vs. sesseionStorage localStorage 라는 개념에 마주하게 되었다. sessionStorage 라는 개념을 비교하면서 정리해보고자 한다. web storage 개념을 알아야 한다. ✔️ web storage 웹 스토리지 (web storage) 는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 기본적으로 키 (key) 와 값 (value) 으로 이루어진 데이터를 저장할 수 있다. ⚠️ Da... JavaScriptfront endJavaScript [프론트엔드] HTML5 #1 ✔️ visual studio code 사용 ! + tab키를 누르면 기본 html 형식 나옴 html:5 + tab키를 눌러도 기본 형식 나타남 ✔️ hn tag 제목을 표시할 때 사용하는 태그 ✔️ br tag 줄을 바꿀 수 있음 ✔️ p tag 하나의 문단을 표시할 때 사용 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐 ✔️ pre tag 입력한 글자를 그대로 보고싶을 때... front endhtmlfront end TIL 21 | DOM(Document Object Model) DOM이란 Document Object Model의 약자로서, 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object)모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. 즉, DOM은 HTML인 웹 페이지와 스크립팅 언어인 JavaScript를 연결하는 역할을 수행한다. 그럼 구체적으로 어떻게 JavaScript는 HTML에 접근할 ... JavaScriptDOMTILfront endhtmlDOM